<template>
    <div class="insert-contis">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/warehouse/information' }">仓库列表</el-breadcrumb-item>
            <el-breadcrumb-item>新增仓库</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form ref="formRef" :model="form" label-width="120px" :rules="formRules">
                <el-form-item label="输入仓库名称" prop="name" :rules="[{ required: true, message: '输入仓库名称' }]">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="仓库类型" prop="type" :rules="[{ required: true, message: '请选择类型' }]">
                    <el-select v-model="form.type" placeholder="选择仓库类型">
                        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="创建日期" prop="date" :rules="[{ required: true, message: '请选择日期' }]">
                    <el-date-picker v-model="form.date" type="date">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="创建主管" prop="manager" :rules="[{ required: true, message: '请输入主管' }]">
                    <el-input v-model="form.manager"></el-input>
                </el-form-item>

                <el-form-item label="主管电话" prop="phone" :rules="[{ required: true, message: '请输入电话' }]">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>

                <el-form-item label="商品地址" prop="address" :rules="[{ required: true, message: '请输入地址' }]">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>

                <el-form-item label="是否启用" prop="xunze" :rules="[{ required: true, message: '是否启用' }]">
                    <el-select v-model="form.xunze" placeholder="选择是否启用">
                        <el-option v-for="item in xunzes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="$router.back()">取消</el-button>
                    <el-button type="primary" @click="submitFrom">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/api/request';
import { useRouter } from 'vue-router';
let emits = defineEmits(["closeDialog"])
let formRef = ref(null)

const router = useRouter();

const types = ref([
    { value: "成品仓库", label: "成品仓库" },
    { value: "原材料仓库", label: "原材料仓库" },
]);
const xunzes = ref([
    { value: "是", label: "是" },
    { value: "否", label: "否" }
]);
const formRules = ref({
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入11位手机号',
            trigger: 'blur'
        }
    ],
    manager: [
        { required: true, message: '请输入主管ID', trigger: 'blur' },
        {
            pattern: /^MGR-\d{3}$/,
            message: '主管ID格式错误',
            trigger: 'blur'
        }
    ]
});
const form = ref({
    name: '',
    type: '',
    date: new Date(),
    manager: '',
    phone: '',
    address: '',
    xunze: ''
});
const submitFrom = () => {
    formRef.value.validate((isValid) => {
        if (isValid) {
            const submitData = {
                warehouseName: form.value.name,
                warehouseType: form.value.type,
                createTime: form.value.date,
                managerId: form.value.manager,
                managerPhone: form.value.phone,
                address: form.value.address,
                isEnabled: form.value.xunze === "是" ? 1 : 0
            };

            request({
                method: "post",
                url: "/warehouse/insert",
                data: submitData
            }).then(res => {
                if (res.data.success) {
                    ElMessage.success("新增成功!");

                    emits("closeDialog")
                } else {
                    console.error("新增失败:", res.message);
                    ElMessage.error(`新增失败: ${res.message || '未知错误'}`);
                }
            }).catch(err => {
                console.error("请求异常:", err);
                ElMessage.error(`提交失败: ${err.message || '网络错误'}`);
            });
        }
    });
};
</script>
<style scoped>
.insert-container {
    padding: 20px;
}

.el-breadcrumb {
    margin-bottom: 20px;
}
</style>
